<template>

	<view>

		<cu-custom isBack="true" :bgColor="'bg-'+$themeColor()">
			<block slot="backText">返回</block>
			<block slot="content">排水达标信息</block>
		</cu-custom>
		
		
		<scroll-view scroll-x class="bg-black nav text-center">
			<view class="cu-item" :class="index==TabCur?'text-white cur':''" v-for="(item,index) in 4" :key="index" @tap="tabSelect" :data-id="index">
				<!-- projectNameList{{index}} -->
				{{projectNameList[index]}}
			</view>
		</scroll-view>
		
		
		<view :class="'bg-'+$bgColor()" v-if="TabCur==0">
			<form @submit="formSubmit">
				<input name="id" :value="data.id" style="display: none;"/>
				<input name="itemId" :value="data.itemId" style="display: none;"/>
				<view class="cu-form-group ">
					<view class="title" >区域:</view>
					<input  name="region" :value="data.region" style="display: none;"></input>
					
					<picker @change="regionPickerChange" :value="regionPickerIndex" :range="regionPicker">
						<view class="picker">
							{{regionPickerIndex>-1?regionPicker[regionPickerIndex]:data.region}}
						</view>
					</picker>
				</view>
				
				
				
				
				<!-- <view class="cu-form-group ">
					<view class="title" >小区序号:</view>
					<input  name="areaNum" :value="data.areaNum" disabled="disabled"></input>
				</view> -->
				<view class="cu-form-group ">
					<view class="title" >小区名称:</view>
					<input  name="areaName" :value="data.areaName" ></input>
				</view>
				<!-- <view class="cu-form-group ">
					<view class="title" >所属片区:</view>
					<input  name="belongZone" :value="data.belongZone" disabled="disabled"></input>
				</view> -->
				<view class="cu-form-group ">
					<view class="title" >所属区:</view>
					<input  name="belongDistrict" :value="data.belongDistrict" ></input>
				</view>
				<view class="cu-form-group ">
					<view class="title" >所属工程:</view>
					<input  name="belongProject" :value="data.belongProject" ></input>
				</view>
				<view class="cu-form-group ">
					<view class="title" >所属街道:</view>
					<input  name="belongStreet" :value="data.belongStreet" ></input>
				</view>
				<view class="cu-form-group ">
					<view class="title" >小区类型:</view>
					<input  name="areaType" :value="data.areaType" ></input>
				</view>
				<view class="cu-form-group ">
					<view class="title" >小区地址:</view>
					<input  name="areaAddress" :value="data.areaAddress" ></input>
				</view>
				<view class="cu-form-group ">
					<view class="title" >小区正本清源方案类型:</view>
					<input  name="planType" :value="data.planType" ></input>
				</view>
				<!-- <view class="cu-form-group ">
					<view class="title" >预验收及验收:</view>
					<input  name="checkAndAccept" :value="data.checkAndAccept" disabled="disabled"></input>
				</view>
				<view class="cu-form-group ">
					<view class="title" >质量评估:</view>
					<input  name="qualityAssessment" :value="data.qualityAssessment" disabled="disabled"></input>
				</view>
				<view class="cu-form-group ">
					<view class="title" >排水达标认定:</view>
					<input  name="qualification" :value="data.qualification" disabled="disabled"></input>
				</view> -->
				<view class="cu-form-group ">
					<view class="title" >是否验收:</view>
					<input  name="checkState" :value="data.checkState" style="display: none;"></input>
					<switch @change="SwitchCheckState" :class="data.checkState=='是'?'checked':''" :checked="data.checkState=='是'?true:false"></switch>
				</view>
				<view class="cu-form-group ">
					<view class="title" >是否移交:</view>
					<input  name="transferState" :value="data.transferState" style="display: none;"></input>
					<switch @change="SwitchTransferState" :class="data.transferState=='是'?'checked':''" :checked="data.transferState=='是'?true:false"></switch>
					
				</view>
				<!-- <view class="cu-form-group ">
					<view class="title" >结论:</view>
					<input  name="conclusion" :value="data.conclusion" ></input>
				</view> -->
				
				<view class="padding flex flex-direction">
					<button form-type="submit" class="cu-btn bg-blue margin-tb-sm lg" :disabled="submiting">提交</button>
				</view>
			</form>
		</view>

		<view :class="'bg-'+$bgColor()" v-if="TabCur==1">
			<form @submit="formSubmit1">
				<view class="cu-list menu-avatar">
					<view class="cu-item" @click="goToQuestion(item)" style="height: 270px;"  v-for="(item,index) in questionData" :key="index"
					:data-target="'move-box-' + index">
					 <view class="content">
					 	<view class="cu-form-group ">
					 		<view class="title" >区域:</view>
					 		<input  name="areaName" :value="item.areaName" disabled="disabled"></input>
					 	</view>
					 	<view class="cu-form-group ">
					 		<view class="title" >第几次:</view>
					 		<input  name="timeName" :value="item.timeName" disabled="disabled"></input>
					 	</view>
					 	<view class="cu-form-group ">
					 		<view class="title" >问题类别:</view>
					 		<input  name="questionCategory" :value="item.questionCategory" disabled="disabled"></input>
					 	</view>
						<view class="cu-form-group ">
							<view class="title" >小区名称:</view>
							<input  name="areaName" :value="item.areaName" disabled="disabled"></input>
						</view>
						<view class="cu-form-group ">
							<view class="title" >所属工程:</view>
							<input  name="belongProject" :value="item.belongProject" disabled="disabled"></input>
						</view>
					 </view>
					 
					 </view>
				</view>
			</form>
		</view>
		
		<view :class="'bg-'+$bgColor()" v-if="TabCur==2">
			<form @submit="formSubmit2">
				<view class="cu-list menu-avatar">
					<view class="cu-item" @click="goToTrouble(item)" style="height: 270px;"  v-for="(item,index) in troubleData" :key="index"
					:data-target="'move-box-' + index">
					 <view class="content">
					 	<view class="cu-form-group ">
					 		<view class="title" >区域:</view>
					 		<input  name="areaName" :value="item.areaName" disabled="disabled"></input>
					 	</view>
					 	<view class="cu-form-group ">
					 		<view class="title" >第几次:</view>
					 		<input  name="timeName" :value="item.timeName" disabled="disabled"></input>
					 	</view>
					 	<view class="cu-form-group ">
					 		<view class="title" >问题类别:</view>
					 		<input  name="questionCategory" :value="item.questionCategory" disabled="disabled"></input>
					 	</view>
						<view class="cu-form-group ">
							<view class="title" >所属工程:</view>
							<input  name="belongProject" :value="item.belongProject" disabled="disabled"></input>
						</view>
						<view class="cu-form-group ">
							<view class="title" >小区名称:</view>
							<input  name="areaName" :value="item.areaName" disabled="disabled"></input>
						</view>
					 </view>
					 
					 </view>
				</view>
			</form>
		</view>
		
		<view :class="'bg-'+$bgColor()" v-if="TabCur==3">
			<form @submit="formSubmit3">
				<view class="cu-list menu-avatar">
					<view class="cu-item" @click="goToScore(item)" style="height: 270px;"  v-for="(item,index) in scoreData" :key="index"
					:data-target="'move-box-' + index">
					 <view class="content">
					 	<view class="cu-form-group ">
					 		<view class="title" >区域:</view>
					 		<input  name="areaName" :value="item.areaName" disabled="disabled"></input>
					 	</view>
					 	<view class="cu-form-group ">
					 		<view class="title" >第几次:</view>
					 		<input  name="timeName" :value="item.timeName" disabled="disabled"></input>
					 	</view>
					 	<view class="cu-form-group ">
					 		<view class="title" >查看时间:</view>
					 		<input  name="viewTime" :value="item.viewTime" disabled="disabled"></input>
					 	</view>
						<view class="cu-form-group ">
							<view class="title" >小区名称:</view>
							<input  name="areaName" :value="item.areaName" disabled="disabled"></input>
						</view>
					 </view>
					 
					 </view>
				</view>
			</form>
		</view>


	</view>
</template>

<script>
	
	var content = null;
	var touchs = [];
	var canvasw = 0;
	var canvash = 0;
	var _that;
	//获取系统信息
	uni.getSystemInfo({
		success: function(res) {
			canvasw = res.windowWidth;
			canvash = res.windowHeight;
		},
	})
	export default {
		data() {
			return {
				id: '',
				itemId:'',
				projectId:'',
				data: '',
				index:-1,
				TabCur: 0,
				scrollLeft: 0,
				projectNameList:['小区信息','问题清单(宝安)','问题清单(龙华、坪山)','专家评分'],
				regionPicker:[],
				regionPickerIndex:-1,
				submiting:false,
				questionData:[],
				troubleData:[],
				scoreData:[],
				
			}
		},
		onLoad() {
			console.log("onLoad")
		},
		onShow() {
			console.log("onShow")
			this.req();
		},
		onBackPress(options) {
			console.log("onBackPress")
		},
		onLoad: function(opt) {
			console.log("onLoad")
			this.itemId = opt.itemId;
			// 获取项目数据
			// this.getProjectInfo(this.projectId);
			
			// 获取小区信息
			this.getItemInfo(this.itemId);
			// 获取区域信息
			this.getRegion();
		},
		mounted() {
			// 初始化加载
			console.log("onLoad")
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				this.req();
			},
			req(){
				var param = {
					"projectName":this.searchVal,
					"district":this.district,
					"pageSize":this.pageSize,
					"pageNum":this.pageNum
				}
							
				if(this.TabCur==0){
					this.getItemInfo(this.itemId);
				}else if(this.TabCur==1){
					this.getQuestionList()
				}else if(this.TabCur==2){
					this.getTroubleList()
				}else if(this.TabCur==3){
					this.getScoreList()
				}
			},
			getProjectInfo(projectId) {
				this.$httpGet('/system/project/getProjectByProjectId/'+projectId , null).then(res => {
					this.data = res.data.data
				})
			},
			getItemInfo(itemId) {
				this.$httpGet('/system/item/info/'+itemId , null).then(res => {
					this.data = res.data.data
				})
			},
			getQuestionList(){
				var data = {
					"region":this.data.region,
					"areaName":this.data.areaName,
					"belongProject":this.data.belongProject
				};
				this.$httpPost('/system/question/list/' , data).then(res => {
					this.questionData = res.data.rows
				})
			},
			getTroubleList(){
				
				var data = {
					"region":this.data.region,
					"areaName":this.data.areaName,
					"belongProject":this.data.belongProject
				};
				this.$httpPost('/system/trouble/list/' , data).then(res => {
					this.troubleData = res.data.rows
				})
			},
			getScoreList(){
				var data = {
					"region":this.data.region,
					"areaName":this.data.areaName,
					"belongProject":this.data.belongProject
				};
				this.$httpPost('/system/score/list/' , data).then(res => {
					this.scoreData = res.data.rows
				})
			},
			SwitchCheckState(e){
				this.data.checkState = e.detail.value?'是':'否';
			},
			SwitchTransferState(e) {
				this.data.transferState = e.detail.value?'是':'否';
			},
			regionPickerChange(e){
				this.regionPickerIndex = e.detail.value
				this.data.region = this.regionPicker[this.regionPickerIndex]
			},
			getRegion(){
				var dictData = {dictType:'zbqy_region'}
				this.$httpPost('/system/dict/data/list' , dictData).then(res => {
					// this.data = res.data.data
					var array = res.data.rows;
					var regionPicker = [];
					for (var i = 0; i < array.length; i++) {  
						// console.log(array[i].dictValue);  
						regionPicker.push(array[i].dictValue)
					}
					this.regionPicker = regionPicker;
				})
			},
			formSubmit(e){
				this.submiting = true;
				
				var formData = e.detail.value;
				
				console.log(formData);
				
				this.$httpPost('/system/item/edit' , formData).then(res => {
					console.log(res);
					this.$msg(res.data.msg);
				})
				this.submiting = false;
			},
			
			goToQuestion(row){
				uni.navigateTo({
					url: "/pages/project/questionInfo?questionId="+row.questionId
				});
			},
			goToTrouble(row){
				uni.navigateTo({
					url: "/pages/project/troubleInfo?troubleId="+row.troubleId
				});
			},
			goToScore(row){
				uni.navigateTo({
					url: "/pages/project/scoreInfo?scoreId="+row.scoreId
				});
			},
			
			isNull(e) {
				if (e != null) {
					return e;
				}
				return "";
			}
		
		}
	}
</script>

<style>
   .cu-form-group .title {
		min-width: calc(4em + 10px);
		text-align: right;
	}
	canvas {
		background-color: #DDDDDD;
		width: 700upx;
		margin: 0 25upx;
		height: calc(30vh - 10upx);
	}
	.cu-list.menu-avatar>.cu-item .content{
		border: 1px solid #cccccc;
		left: 5px;
		width:97%;
	}
</style>
